<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/bc/css/clue.css"/>
</head>
<body class="gray-bg">
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-12">
			<div class="tabs-container">
		        <ul class="nav nav-tabs">
		            <li handleStatus="-1" class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">全部</a></li>
		            <li handleStatus="0" class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">待回复<span class="badge badge-warning pull-right" id="noHandleCount"></span></a></li>
		            <li handleStatus="1" class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">已回复</a></li>
		        </ul>
		        <div class="tab-content">
		            <div id="tab-1" class="tab-pane active">
		                <div class="panel-body">
		                	<div class="row">
		                    	<div class="col-sm-12">
		                    		<label>关键字</label>&nbsp;<input id="keyWord" placeholder="输入姓名/邮箱/电话，支持模糊搜索" type="text" class="form-control" style="display: inline-block;width:260px;">
		                    		&nbsp;&nbsp;
									<label>来源</label>
									<select class="form-control" name="account" style="display: inline-block;width:160px;">
                                        <option>所有渠道</option>
                                        <option>微博</option>
                                        <option>活动</option>
                                        <option>智能营销活动</option>
                                    </select>
									<img class="search" src="<%=path%>/images/search.png" height="34px" style="margin-top: -4px;">
		                    	</div>
		                	</div>
		                	<br/>
		                	<div class="row" id="actionList">
		                		<!-- 
		                		<div class="col-sm-3">
		                			<div class="ibox float-e-margins">
					                    <div class="ibox-title">
					                        <p>最近行为：<span style="color: red;">预约活动</span></p>
					                        <p>最近消费：2017-09-06 20:07</p>
					                    </div>
					                    <div class="ibox-content">
					                    	<table class="table">
					                    		<tr>
					                    			<td style="border-top: 0;">陈永银</td>
					                    			<td style="border-top: 0;"></td>
					                    		</tr>
					                    		<tr>
					                    			<td>微博</td>
					                    			<td style="width:20px;vertical-align: bottom;border-top: 0;"><a class="xiaoTuBiao xtb_dialog"></a></td>
					                    		</tr>
					                    	</table>
					                    </div>
					                </div>
		                		</div>
		                		-->
		                	</div>
		                	
		                	<div class="m_xpages">
		                        <div class="mian">
		                            <span>显示个数</span>
		                            <select><option>12</option><option>24</option><option>48</option></select>
		                            <span>共80条</span>
		                            <span>1/4页</span>
		                            <a href="javascript:;" class="prev">上一页</a>
		                            <a href="javascript:;" class="next">下一页</a>
		                            <span>前往</span>
		                            <input type="text" value="1" class="text">
		                            <span>页</span>
		                        </div>
		                    </div>
		                </div>
		            </div>
		            <div id="tab-2" class="tab-pane">
		                <div class="panel-body">
		                    <div class="row">
		                    	<div class="col-sm-12">
		                    		<label>关键字</label>&nbsp;<input id="keyWord" placeholder="输入姓名/邮箱/电话，支持模糊搜索" type="text" class="form-control" style="display: inline-block;width:260px;">
		                    		&nbsp;&nbsp;
									<label>来源</label>
									<select class="form-control" name="account" style="display: inline-block;width:160px;">
                                        <option>所有渠道</option>
                                        <option>微博</option>
                                        <option>活动</option>
                                        <option>智能营销活动</option>
                                    </select>
									<img class="search" src="<%=path%>/images/search.png" height="34px" style="margin-top: -4px;">
		                    	</div>
		                	</div>
		                	<br/>
		                	<div class="row" id="actionList"></div>
		                	<div class="m_xpages">
		                        <div class="mian">
		                            <span>显示个数</span>
		                            <select><option>12</option><option>24</option><option>48</option></select>
		                            <span>共80条</span>
		                            <span>1/4页</span>
		                            <a href="javascript:;" class="prev">上一页</a>
		                            <a href="javascript:;" class="next">下一页</a>
		                            <span>前往</span>
		                            <input type="text" value="1" class="text">
		                            <span>页</span>
		                        </div>
		                    </div>
		                </div>
		            </div>
		            <div id="tab-3" class="tab-pane">
		                <div class="panel-body">
		                    <div class="row">
		                    	<div class="col-sm-12">
		                    		<label>关键字</label>&nbsp;<input id="keyWord" placeholder="输入姓名/邮箱/电话，支持模糊搜索" type="text" class="form-control" style="display: inline-block;width:260px;">
		                    		&nbsp;&nbsp;
									<label>来源</label>
									<select class="form-control" name="account" style="display: inline-block;width:160px;">
                                        <option>所有渠道</option>
                                        <option>微博</option>
                                        <option>活动</option>
                                        <option>智能营销活动</option>
                                    </select>
									<img class="search" src="<%=path%>/images/search.png" height="34px" style="margin-top: -4px;">
		                    	</div>
		                	</div>
		                	<br/>
		                	<div class="row" id="actionList"></div>
		                	<div class="m_xpages">
		                        <div class="mian">
		                            <span>显示个数</span>
		                            <select><option>12</option><option>24</option><option>48</option></select>
		                            <span>共80条</span>
		                            <span>1/4页</span>
		                            <a href="javascript:;" class="prev">上一页</a>
		                            <a href="javascript:;" class="next">下一页</a>
		                            <span>前往</span>
		                            <input type="text" value="1" class="text">
		                            <span>页</span>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="<%=path%>/hplus/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
<script type="text/javascript" src="<%=path%>/js/page.js"></script>
<script type="text/javascript" src="<%=path%>/bm/js/lengthlimit.js"></script>
<script type="text/javascript" src="<%=path%>/js/chatDialog.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
var startIndex = 0;
var pageSize = 12;
var keyWord = "";		//搜索关键字
var handleStatus = -1;	//处理状态
var source = null;
var currentPage = 1;
var pageCount = 0;

var customerId = 0;	//客户id
var actionId = 0;	//客户行为id
var writeOffId = 0;	//核销id

$(function(){
	init();
	
	/*聊天点击开始*/
	$(document).on("click",".J_xdialogue",function(){
		//初始化数据，全部设置0
		top.customerId = 0;
		top.actionId = 0;
		top.clueWeiboId = 0;
		top.writeOffId = 0;
		
		customerId = $(this).attr("customerId");
		actionId = $(this).attr("actionId");
		writeOffId = $(this).attr("writeOffId");
		top.customerId = customerId;
		top.actionId = actionId;
		top.writeOffId = writeOffId;
		
		var d = top.dialog({
			fixed: true,
			zIndex: 10000,
			padding:0,
			width:1172,
			height:568,
			title:'沟通记录',
			url:"<%=path%>/api/customer_action/customerChatView",
			cancelDisplay: false,
			cancel: function () {
				if(top.customerChatChange == 1){
					init();
					top.customerChatChange = 0;
				}
				top.customerId = 0;
				top.actionId = 0;
				top.clueWeiboId = 0;
				top.writeOffId = 0;
				return true;
			}
		});
		d.showModal();
	});
	/*聊天点击结束*/
	
	
	/* 查询按钮点击开始 */
	$(".search").click(function(){
		currentPage = 1;
		startIndex = 0;
		keyWord = $("div.active #keyWord").val();
		init();
	});
	/* 查询按钮点击结束 */
	
	$(".tabs-container>.nav-tabs>li").click(function(){
		if(handleStatus != $(this).attr("handleStatus")){
			$(":text[id='keyWord']").val("");
		}
		handleStatus = $(this).attr("handleStatus");
		startIndex = 0;
		init();
	});
	
	
	//zhiwen
	$('#keyWord').typeahead({
	 source: function (query, process) {
		
        var parameter ={name:query};
        $.post("${pageContext.request.contextPath}/api/customer_action/searchName", parameter, function (data) {
           //赵鑫把值写成下面这样的就好了
           var objarray =new Array("Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter");
           process(objarray);//这句是关键
//         	if ((data.name)!=null&&(data.name)!="") {
// 				console.log(data.name);
// 			}
        });
    }
});
/* -------------------------------------- */
	
	//联想搜索名字	
	var name = "张";
	$.post("<%=path%>/api/customer_action/searchName",{name:name},function(data){
		
	},"json");
});

function init(){
	$.post('<%=path%>/api/customer_action/actionList',
			{"startIndex":startIndex,"pageSize":pageSize,"keyWord":keyWord,"handleStatus":handleStatus,"source":source},
	function(data){
		
		data = JSON.parse(data);
		
		if(data.noHandleCount == 0){
			$("#noHandleCount").html("");
		}else if(data.noHandleCount < 100)
			$("#noHandleCount").html(data.noHandleCount);
		else if(data.noHandleCount >= 100){
			$("#noHandleCount").html("99+");
		}
		
		setList(data.actionList);
		
		page(data.totalCount);
	});
}

function setList(actionList){
	var mianBan = '';

	var li = "";
	for(var i = 0; i < actionList.length; i++){
		var a = actionList[i];
		var avatar = a.avatar;
		if(avatar == undefined){
			avatar = "";
		}
		mianBan += '<div class="col-sm-3">';
		mianBan += '<div class="ibox float-e-margins">';
		mianBan += '<div class="ibox-title">';
		mianBan += '<p>最近行为：<span style="color: red;">'+a.content+'</span></p>';
		mianBan += '<p>最近消费：'+(a.lastCostTimeStr==null?"无":a.lastCostTimeStr)+'</p>';
		mianBan += '</div>';
		mianBan += '<div class="ibox-content">';
		mianBan += '<table class="table">';
		mianBan += '<tr>';
		mianBan += '<td rowspan="2" style="width: 50px;border-top: 0;"><img src="'+((avatar == null || avatar == undefined || avatar == "") ? "<%=path%>/images/000head_pic.png" : avatar)+'" width="40px" height="40px"></td>';
		mianBan += '<td style="border-top: 0;"><a href="'+path+'/api/custome/customerInfo?customerID='+a.customerId+'">'+a.name+'</a></td>';
		mianBan += '<td style="border-top: 0;"></td>';
		mianBan += '</tr>';
		mianBan += '<tr>';
		mianBan += '<td>'+(a.sourceStr!=undefined?a.sourceStr:"未知")+'</td>';
		mianBan += '<td style="width:20px;vertical-align: bottom;border-top: 0;"><a customerId="'+a.customerId+'" actionId="'+a.id+'" writeOffId="'+((a.bak1==undefined||a.bak1==''||a.bak1==null)?0:a.bak1)+'" class="xiaoTuBiao xtb_dialog"></a></td>';
		mianBan += '</tr>';
		mianBan += '</table>';
		mianBan += '</div>';
		mianBan += '</div>';
		mianBan += '</div>';
	}
	$("div.active #actionList").html(mianBan);
}



function getSourceTitle(source){
	var title;
	switch (source) {
	case "1":
		title="微博";
		break;
	case "2":
		title="微信";
		break;
	case "3":
		title="QQ";
		break;
	case "4":
		title="活动";
		break;
	case "5":
		title="pc网页";
		break;
	default:
		title="未知";
		break;
	}
	return title;
	
}
</script>
</html>
